<template>
  <el-container>
    <!-- 顶部导航 -->
    <el-header>
      <div>
        <h2>企业负责人薪酬看板</h2>
      </div>
    </el-header>

    <!-- 主内容区域 -->
    <el-main>
      <!-- 指标卡片部分 -->
      <div class="top-wrapper">
        <ul>
          <li v-for="item in cardsJson">
            <HeadCard
                :cardValue="item.value"
                :title="item.title"
                :unit="item.unit"
            />
          </li>
        </ul>
      </div>

      <!-- 图表部分 -->
      <div class="content-cockpit">
        <div class="info-card-group-left">
          <div class="info-card" style="height: 435px">
            <div class="info-card-title">薪酬水平</div>
            <div class="info-card-content">
              <Echarts-Scatter style="width: 1250px; height: 400px"/>
            </div>
          </div>
          <div style="display: flex">
            <div class="info-card" style="margin-top: 20px;width: 50%;height: 437px;margin-right: 20px;">
              <div class="info-card-title">差距倍数</div>
              <div class="info-card-content">
                <Echarts-Bar style="width: 500px; height: 350px"/>
              </div>
            </div>
            <div class="info-card" style="margin-top: 20px;width: 50%;">
              <div class="info-card-title">薪酬结构</div>
              <div class="info-card-content">
                <div>
                  <div class="sub-card-title">企业负责人正职</div>
                  <Echarts-Pie-Simple style="width: 250px; height: 250px"/>
                </div>
                <div>
                  <div class="sub-card-title">企业负责人副职</div>
                  <Echarts-Pie-Simple style="width: 250px; height: 250px"/>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="info-card-group-right">
          <div class="info-card" style="height: 895px">
            <div class="info-card-title">看过程执行</div>
            <div class="info-card-content-vertical">
              <div>
                <div class="sub-card-title">超高过高薪酬</div>
                <Table-Overpaid style="width: 630px; height: 150px"/>
              </div>
              <div class="divider-horizontal"/>
              <div>
                <div class="sub-card-title">差距不合理</div>
                <div style="display: flex;">
                  <div>
                    <div class="sub-card-title-gray">正副职平均薪酬差距</div>
                    <Table-Average-Pay-Gap/>
                  </div>
                  <div>
                    <div class="sub-card-title-gray">与职工收入差距</div>
                    <Table-Between-Employees/>
                  </div>
                </div>
              </div>
              <div class="divider-horizontal"/>
              <div>
                <div class="sub-card-title">薪酬与业绩不匹配</div>
                <Echarts-Matrix-Scatter-Bevel style="width: 500px; height: 120px"/>
              </div>
            </div>
          </div>
        </div>
      </div>

    </el-main>
  </el-container>
</template>

<script setup>
import cardsJson from '@/json/headCardFour.json';
import HeadCard from "@/components/HeadCard.vue";
import EchartsScatter from "@/components/Echarts-Scatter.vue";
import EchartsBar from "@/components/Echarts-Bar.vue";
import EchartsPieSimple from "@/components/Echarts-Pie-Simple.vue";
import TableOverpaid from "@/components/Table-Overpaid.vue";
import TableAveragePayGap from "@/components/Table-Average-Pay-Gap.vue";
import TableBetweenEmployees from "@/components/Table-Between-Employees.vue";
import EchartsMatrixScatterBevel from "@/components/Echarts-Matrix-Scatter-Bevel.vue";
</script>

<style scoped>
.top-wrapper ul {
  display: flex;
  justify-content: space-between;
  padding: 0;
}

.top-wrapper li {
  width: 20%;
  list-style: none;
  padding-right: 1.1%;
}

.top-wrapper li:last-child {
  padding-right: 0;
}

.info-card {
  background: #FDFEFE;
  box-shadow: 0 25px 50px 0 rgba(0, 0, 0, 0.04);
  border-radius: 8px;
}

.info-card-group-left {
  width: 59.5%;
  margin-right: 1.1%;
}

.info-card-group-right {
  width: 39.5%;
  height: 895px;
}

.divider-horizontal {
  margin-top: 28px;
  margin-left: 50px;
  width: 500px;
  border: 1px solid rgba(240, 243, 248, 1);
}

.info-card-title {
  font-family: 'PingFang', serif;
  font-size: 23px;
  padding-left: 35px;
  padding-top: 35px;
  color: #2971FF;
  line-height: 13px;
  font-weight: 600;
}

.info-card-content {
  display: flex;
  margin-left: 20px;
}

.info-card-content-vertical {
  margin-top: 10px;
  margin-left: 20px;
}

.sub-card {
  margin-top: 20px;
  margin-left: 20px;
  max-height: 206px;
}

.content-cockpit {
  display: flex;
  margin-top: 32px;
}

.sub-card-title {
  font-family: 'PingFang', serif;
  font-size: 18px;
  color: #000000;
  margin-top: 30px;
  margin-left: 5px;
  margin-bottom: 15px;
}

.sub-card-title::before {
  content: "•"; /* 使用Unicode字符表示圆点 */
  margin-right: 8px; /* 控制圆点和文本之间的间距 */
  color: #0080ff; /* 设置圆点的颜色 */
  font-size: 16px; /* 设置圆点的大小 */
}

.sub-card-title-gray {
  font-family: 'PingFang', serif;
  font-size: 14px;
  color: #344563;
  letter-spacing: 0.18px;
  font-weight: 400;
}
</style>